<template>
  <view class="container">
    <!-- 顶部状态栏 -->
    <view class="header">
      <view class="header-left" @click="goBack">
        <text class="header-icon iconfont">&#xe6a0;</text>
      </view>
      <text class="title">我的评价</text>
      <view class="header-right"></view>
    </view>
    
    <!-- 主内容区 -->
    <view class="content">
      <view class="review-list" v-if="reviews.length > 0">
        <view class="review-item" v-for="(review, index) in reviews" :key="index">
          <view class="dish-info">
            <image class="dish-image" :src="review.dishImage" mode="aspectFill"></image>
            <view class="dish-details">
              <text class="dish-name">{{ review.dishName }}</text>
              <view class="dish-rating">
                <text class="rating-star" v-for="i in 5" :key="i">
                  {{ i <= review.rating ? '★' : '☆' }}
                </text>
              </view>
            </view>
          </view>
          
          <text class="review-content">{{ review.content }}</text>
          
          <view class="review-footer">
            <text class="review-date">{{ review.date }}</text>
            <view class="review-actions">
              <view class="action-item" @click="deleteReview(index)">
                <text class="action-icon">&#xe6b4;</text>
                <text class="action-text">删除</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <view class="empty-state" v-else>
        <image class="empty-image" src="/static/images/empty-reviews.png" mode="aspectFit"></image>
        <text class="empty-text">暂无评价记录</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      reviews: [
        {
          dishName: '现磨豆浆',
          dishImage: 'https://images.unsplash.com/photo-1551326844-4df70f78d0e9?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3',
          rating: 5,
          content: '豆浆很香浓，没有豆腥味，每天早上必买！',
          date: '2023-10-15'
        },
        {
          dishName: '肉包子',
          dishImage: 'https://images.unsplash.com/photo-1563245372-f21724e3856d?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3',
          rating: 4,
          content: '肉馅很足，皮薄馅大，就是有点油。',
          date: '2023-10-10'
        },
        {
          dishName: '宫保鸡丁',
          dishImage: 'https://images.unsplash.com/photo-1525755662778-989d0524087e?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3',
          rating: 3,
          content: '味道一般，鸡肉有点老，花生很香脆。',
          date: '2023-10-05'
        }
      ]
    }
  },
  methods: {
    goBack() {
      uni.switchTab({
        url: '/pages/user/profile'
      });
    },
    deleteReview(index) {
      uni.showModal({
        title: '提示',
        content: '确定要删除这条评价吗？',
        success: (res) => {
          if (res.confirm) {
            this.reviews.splice(index, 1);
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            });
          }
        }
      });
    }
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #F5F5F5;
}

.header {
  padding: 40rpx;
  background-color: #FF7A45;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left, .header-right {
  width: 60rpx;
}

.header-icon {
  font-family: "iconfont";
  color: #FFFFFF;
  font-size: 40rpx;
}

.title {
  color: #FFFFFF;
  font-size: 36rpx;
  font-weight: bold;
}

.content {
  flex: 1;
  padding: 30rpx;
}

.review-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.review-item {
  background-color: #FFFFFF;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.dish-info {
  display: flex;
  margin-bottom: 20rpx;
}

.dish-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 12rpx;
  object-fit: cover;
}

.dish-details {
  margin-left: 20rpx;
  flex: 1;
}

.dish-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #262626;
  display: block;
  margin-bottom: 10rpx;
}

.dish-rating {
  display: flex;
}

.rating-star {
  color: #FFA940;
  font-size: 28rpx;
}

.review-content {
  font-size: 28rpx;
  color: #595959;
  line-height: 1.5;
  margin-bottom: 20rpx;
  display: block;
}

.review-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.review-date {
  font-size: 24rpx;
  color: #8C8C8C;
}

.review-actions {
  display: flex;
}

.action-item {
  display: flex;
  align-items: center;
  margin-left: 30rpx;
}

.action-icon {
  font-family: "iconfont";
  font-size: 28rpx;
  color: #FF4D4F;
  margin-right: 8rpx;
}

.action-text {
  font-size: 24rpx;
  color: #FF4D4F;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.empty-image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #8C8C8C;
}
</style> 